<template>
    <div class="dataN">
        <h1>店铺数量</h1>
        <div id="one"></div>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts'
import http from '../util/api';

type EChartsOption = echarts.EChartsOption;
var option: EChartsOption;


onMounted(() => {
    var chartDom = document.getElementById('one')!;
    var myChart = echarts.init(chartDom);
    http('/shop').then((res:any)=>{
        let ydata = res.data.map(val => val.id)
        let xdata = res.data.map(val => val.time)
        option = {
        xAxis: {
            type: 'category',
            data: xdata
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: ydata,
                type: 'line',
                smooth: true
            }
        ]
    };

    option && myChart.setOption(option);
    })
    
})




</script>

<style lang="scss" scoped>
h1{
    /* 48像素 */
    height: 40px;
    color: black;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

#one {
    height: 400px;
}

.dataN {
    width: 100%;
    height: 100%;
    background-color: #fff;
}
</style>